<template>
    <el-dialog id="personal-user-record"
               append-to-body
               top="5vh"
               :width="dialog.width"
               :visible="dialog.visible"
               :modal-append-to-body="false"
               :close-on-click-modal="false"
               @close="close">
        <div slot="title" class="text-center">
            <span class="font-s20 text-bold">
                <icon name="record"></icon>
                查看用户 {{ userLoginRecords.user.uid }} 登录记录
            </span>
        </div>
<!--        <div class="r-flex mb-20">-->
<!--            <div style="width: 80px;">-->
<!--                &lt;!&ndash; 日期类型 &ndash;&gt;-->
<!--                <el-select v-model="params.date_type_value"-->
<!--                           size="medium"-->
<!--                           placeholder="日期"-->
<!--                           clearable-->
<!--                           class="mr-10">-->
<!--                    <el-option v-for="item in pickerDate.dateTypeOptions"-->
<!--                               :key="item.value"-->
<!--                               :label="item.label"-->
<!--                               :value="item.value">-->
<!--                    </el-option>-->
<!--                </el-select>-->
<!--            </div>-->
<!--            <div class="ml-15" style="width: 300px;">-->
<!--                &lt;!&ndash; 日期 &ndash;&gt;-->
<!--                <el-date-picker range-separator="-"-->
<!--                                start-placeholder="开始日期"-->
<!--                                end-placeholder="结束日期"-->
<!--                                size="medium"-->
<!--                                class="mr-10"-->
<!--                                style="width: 300px;"-->
<!--                                clearable-->
<!--                                v-model="params.date_value"-->
<!--                                :type="params.date_type_value || 'daterange'"-->
<!--                                :picker-options="pickerDate.dateOptions"-->
<!--                                :disabled="isEmpty(params.date_type_value)">-->
<!--                </el-date-picker>-->
<!--            </div>-->
<!--        </div>-->
        <div class="r-flex mb-20">
            <div style="width: 80px;">
                <!-- 日期类型 -->
                <el-select v-model="params.date_type_value"
                           size="medium"
                           placeholder="日期"
                           clearable>
                    <el-option v-for="item in pickerDate.dateTypeOptions"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="ml-10">
                <!-- 日期 -->
                <el-date-picker range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                size="medium"
                                style="width: 230px;"
                                clearable
                                v-model="params.date_value"
                                :type="params.date_type_value || 'daterange'"
                                :picker-options="pickerDate.dateOptions"
                                :disabled="isEmpty(params.date_type_value)"
                                @change="handleQuery">
                </el-date-picker>
            </div>
            <div class="ml-10" style="width: 200px;">
                <!-- 类型 -->
                <el-select v-model="params.login_type"
                           placeholder="登录类型"
                           size="medium"
                           clearable
                           multiple
                           collapse-tags
                           @change="handleQuery">
                    <el-option v-for="type in userLoginRecords.login_type_options"
                               :key="type.id"
                               :label="type.label"
                               :value="type.value"></el-option>
                </el-select>
            </div>
            <el-button size="medium" class="ml-10" @click="handleReload">
                <icon name="refresh"></icon>
                重新载入
            </el-button>
            <div class="r-flex__item"></div>
            <strong class="font-s16 text-bold">查询结果：{{ userLoginRecords.total || 0 }}</strong>
        </div>
        <el-table row-key="id"
                  size="medium"
                  stripe
                  v-loading="table.loading"
                  :data="userLoginRecords.data_list">
            <template slot="empty">
                <el-empty></el-empty>
            </template>
            <el-table-column label="ID" fixed="left" prop="id" width="70">
                <template slot-scope="item">
                    <strong class="text-black">{{ item.row.id }}</strong>
                </template>
            </el-table-column>
            <el-table-column prop="login_ip" label="登录类型" width="150" align="center">
                <template slot-scope="item">
                    <el-tag size="small"
                            :type="item.row.login_type_style">{{ item.row.login_type_label }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="login_ip" label="登录IP"></el-table-column>
            <el-table-column prop="login_time" label="登录时间" width="160" align="center"></el-table-column>
        </el-table>
        <!-- 页码 -->
        <div class="block-pagination mt-20 text-center">
            <el-pagination :total="userLoginRecords.total"
                           :page-sizes="pagination.pageSizes"
                           :page-size="20"
                           :current-page.sync="pagination.currentPage"
                           @current-change="handlePageQuery"
                           background
                           layout="prev, pager, next, jumper"></el-pagination>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import Component, { mixins } from 'vue-class-component'
import { Emit, Prop } from 'vue-property-decorator'

import { namespace } from 'vuex-class'

import BaseMixin from '@/mixins/base'
import FunctionMixin from '@/mixins/function'
import PickerDateMixin from '@/mixins/picker-date'
import { errorMessage, loading, successMessage } from '@/utils'

const module = namespace('cms/personalUserRecord')

@Component
export default class userLoginRecord extends mixins(BaseMixin, FunctionMixin, PickerDateMixin) {
  @Prop({type: Object, default: {width: '1000px', visible: false, index: -1}}) dialog!: any

  // Vuex
  @module.State userLoginRecords!: any
  @module.Action userLoginRecord!: (payload: any) => Promise<any>


  /**
   * 重新载入
   *
   * @return {void}
   */
  private handleReload(): void {
    const _loading = loading({target: '#personal-user-record > .el-dialog', background: 'rgba(0, 0, 0, .7)'})
    this.params = {}
    this.userLoginRecord({uid: this.userLoginRecords.user.uid}).then((res) => {
      _loading.close()
      res.status === 200 ? successMessage('重新载入成功！') : errorMessage(res.message)
    }).catch((err) => {
      _loading.close()
    })
  }

  /**
   * 获取查询
   *
   * @param {any} params
   * @return Promise<any>
   */
  private getQuery(params: any): Promise<any> {
    this.table.loading = true
    return this.userLoginRecord({uid: this.userLoginRecords.user.uid, params}).then((res) => {
      this.table.loading = false
    }).catch((err) => {
      this.table.loading = false
    })
  }

  /**
   * 处理分页
   *
   * @return {void}
   */
  private handleQuery(): void {
    this.table.loading = true
    const params = {
      ...this.params,
      per_page: this.pagination.perPage,
      page: 1
    }

    this.getQuery(params)
  }

  /**
   * 处理分页
   *
   * @return {void}
   */
  private handlePageQuery(): void {
    this.table.loading = true
    const params = {
      ...this.params,
      per_page: this.pagination.perPage,
      page: this.pagination.currentPage
    }

    this.getQuery(params)
  }

  @Emit()
  close(): void {}
}
</script>

<style scoped>
</style>